<script setup>
import { ref, reactive } from 'vue';

const count1 = ref(0);
const count2 = ref(0);

const validate = () => {
  console.log('表单校验方法');
};

const user = reactive({ name: 'zs', info: { gender: '男', age: 18 } });

// 暴露属性给外部组件使用，如果不暴露，外界是拿不到组件内部的数据和方法的。
//   count1 由于暴露的是 count.value 这个值，所以外界拿到的时候就是一个值，修改就不会互相影响了（丢失响应式了）
//   count2 由于暴露的是 count 这个 ref 函数的返回值（Proxy 对象），所以外界拿到的是一个地址（响应式没丢），并且会自动解包 (外界不需要再 .value 了)
//   user 由于暴露的是 user 这个 reactive 函数的返回值（Proxy 对象），所以外界拿到的是一个地址（响应式没丢）
defineExpose({
  count1: count1.value,
  count2,
  validate,
  user,
});
</script>

<template>
  <h3>我是Form组件</h3>
  <h1>count1: {{ count1 }}</h1>
  <h1>count2: {{ count2 }}</h1>
  <h2>user: {{ user }}</h2>
  <hr />
</template>
